<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* overflow: auto; */
            /* width: 860px;
            height: 500px; */
            /* background: url(./images/flash_sale.png) no-repeat center / cover; */
           
        /* background: url(./images/flash_sale.png) ; */
        /* padding: auto; */
        /* padding: 100px 250px; */
        box-sizing: border-box;
        }
         /* img {
            width: 100%;
            height: 100%;

         } */
        .box2 {
            
            
        }

        ul {
            list-style: none;
            position: relative;
            padding-left: 10%;
            padding-top: 0%;

        }
        ul li {
           display: block;
           float: left;
        }
    </style>
</head>
<body>
      <div class="box">
        <img src="./images/flash_sale.png" alt="">
            <div class="box2">
                <ul>
                    <li>00天</li>
                    <li>00时</li>
                    <li>00分</li>
                    <li>00秒</li>
                </ul>
            </div>
      </div>  
      <script>
        const end = new Date('2024-5-20');
        const ss = parseInt(end.getTime()/1000);
        console.log(ss);
        const lis = document.querySelectorAll('li');
        const timeId = setInterval(()=>{
            // const start = new Date()
            // console.log(start)
            let cur = parseInt(Date.now()/1000);
            cur = ss - cur; 
            if(cur <= 0){
                // 停止定时器
                clearInterval(timeId);
            }
            console.log(cur);
            const days = parseInt((cur)/(24*3600));
            cur = cur%(24*3600);
            // console.log(cur);
            let h =  parseInt(cur/3600);
            cur %= 3600;
            let m = parseInt(cur / 60);
            let s = parseInt(cur % 60);
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s  < 10 ? '0' + s : s;
            lis[0].innerHTML = `${days}天`;
            lis[1].innerHTML = `${h}时`;
            lis[2].innerHTML = `${m}分`;
            lis[3].innerHTML = `${s}秒`;
        },1000)
      </script>

</body>
</html>